<template>
    <div class="exchangeadd">
        <div class="outmain ba_f heighthv pad_20 bor_rad5">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>创建兑换码活动</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet flex-y-top">
                <div class="flex-g-1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="兑换码名称" :required='true' prop="name">
                            <el-input v-model="form.name" placeholder="请输入兑换码名称"></el-input>
                        </el-form-item>
                        <el-form-item label="活动时间" :required='true'>
                            <el-date-picker
                                    v-model="timeData"
                                    type="datetimerange"
                                    align="right"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['08:00:00', '23:59:59']">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="库存" :required='true' prop="stock">
                            <el-input v-model="form.stock" placeholder="请输入发放总量" :disabled="id>0"></el-input>
                            <span class="mar_lr10">个</span>
                        </el-form-item>
                        <el-form-item label="每人可用" :required='true'>
                            <div class="time_item">
                                <el-radio v-model="form.limitType" label="1">不限制</el-radio>
                                <el-radio v-model="form.limitType" label="2">限制</el-radio>
                                <span v-show="form.limitType=='2'">
                                    <el-input-number v-model="form.maxNum" controls-position="right" :min="1" :max="1000000"></el-input-number>
                                    <span class="mar_l10">个码</span>
                                </span>
                            </div>
                        </el-form-item>
                        <el-form-item label="兑换权益">
                            <div class="">
                                    <div class="mar_lr10">
                                        <el-checkbox-group v-model="form.isCoupon">
                                            <el-checkbox  true-label="1" false-label="2">兑换优惠券</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                    <div v-show="form.isCoupon=='1'" class="flex">
                                        <el-select v-model="form.coupon" multiple filterable placeholder="请选择优惠券">
                                            <el-option v-for="item in comgrouping" :key="item.id" :label="item.name"
                                                       :value="item.id"></el-option>
                                        </el-select>
                                    </div>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="flex-g-0 pad_lr_20">
                    <div class="fon_16">常见问题</div>
                    <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
                        <el-collapse-item title="什么是兑换码？" name="1">
                            <div>兑换码是门店通过不同的渠道发放给用户，用户通过兑换码来兑换相对应的代金券</div>
                        </el-collapse-item>
                        <el-collapse-item title="为什么要做兑换码活动？" name="2">
                            <div>可以通过兑换码活动来回馈不同的用户群体，增加下单率</div>
                        </el-collapse-item>
                        <el-collapse-item title="哪些用户可以领取兑换码？" name="3">
                            <div>兑换码由门店自行发放，同一兑换码只能发放给同一用户，并且只能兑换一次。</div>
                        </el-collapse-item>
                    </el-collapse>
                    <div class="fon_16 mar_t20">活动规则</div>
                    <div class="color_9 mar_t10 lh30 fon_13">
                        <div>1.活动仅限在线支付订单；</div>
                        <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">立即创建</el-button>
        </div>
    </div>
</template>
<script>
    import {postSaveExchangeCode,getSaveExchangeCode} from "@/api/plug";
    import {getSelectCoupon} from "@/api/user";
    import {changeDate} from "@/utils/index";
    import {mapState} from "vuex";


    export default {
        computed: {
            ...mapState(['storeId']),
        },
        created() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.edit()
            }
            this.getSelectCoupon()
        },
        components: {},
        data() {
            return {
                form: {
                    name: '',
                    stock: '',
                    limitType: '1',
                    maxNum: '',
                    coupon: [],
                    isCoupon: '2',
                },
                id:'',
                timeData: [new Date(),new Date().setMonth(new Date().getMonth() + 3)],
                comgrouping:[],
                collapseName:'',
            }
        },
        methods: {
            async getSelectCoupon(){
                const {data} = await getSelectCoupon()
                this.comgrouping = data?data:[]
            },
            async edit(){
                const {data} = await getSaveExchangeCode({id: this.id,storeId:this.storeId})
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                if(data.startTime){
                    this.timeData = [data.startTime,data.endTime]
                }
            },
            async submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        if(this.timeData){
                            this.form.startTime  = changeDate(this.timeData[0]);
                            this.form.endTime = changeDate(this.timeData[1]);
                        }
                        this.form.storeId = this.storeId
                        const {msg} = await postSaveExchangeCode(this.form);
                        this.$baseMessage(msg, "success");
                        this.$router.go(-1)
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
<style lang="scss">
    .exchangeadd{
        .time_item .el-input {
            width: 180px;
        }
    }
</style>
